<template>
  <div class="ultlist">
    <loadmore v-if=" theSearchResults==''"></loadmore>
    <section class=" hotlist">
      <h3 class="title">最佳匹配</h3>
      <ul class="list">
        <li class="item" v-if="singer!=''">
          <a class="link">
            <div class="list-btn">
              <figure class="piccover">
                <img :src="singer[0].img1v1Url" alt="" />
              </figure>
              <article class="describe">
                <h4 class="mainde">
                  歌手:
                  <p class="hcover">
                    <span><span class="highlight"> {{singer[0].name}} </span> </span>
                    <span> <span class="normal"> ({{singer[0].alias[0]}}) </span></span>
                  </p>
                </h4>
              </article>
              <i class="u-svg"></i>
            </div>
          </a>
        </li>
        <li class="item" v-if="theAlbum!=''">
          <a class=" link">
            <div class="list-btn">
              <figure class="piccover">
                <img :src="theAlbum[0].picUrl" alt="" />
              </figure>
              <article class="describe">
                <h4 class="mainde f-thide">
                  专辑:
                  <p class="hcover">{{theAlbum[0].name}}</p>
                </h4>
                <p class="hcover addtional">
                  <!-- <span><span class="highlight">MC HotDog 热狗 / </span> </span> -->
                  <span> <span class="normal"> {{theAlbum[0].artist.name}}</span></span>
                  <!-- <span> <span class="normal"> / KnowKnow</span></span> -->
                </p>
              </article>
              <i class="u-svg"></i>
            </div>
          </a>
        </li>
        <li class="item" v-if="playlist!=''">
          <a class="link">
            <div class="list-btn bordnone">
              <figure class="piccover">
                <img :src="playlist[0].coverImgUrl" alt="" />
              </figure>
              <article class="describe">
                <h4 class="mainde">
                  歌单:
                  <p class="hcover">
                    <span><span class="highlight">{{playlist[0].name}} </span> </span>
                    <!-- <span> <span class="normal">是个角色</span></span> -->
                  </p>
                  <p class="addtional f-thide">by {{playlist[0].creator.nickname}}</p>
                </h4>
              </article>
              <i class="u-svg"></i>
            </div>
          </a>
        </li>
      </ul>
    </section>
    <musiclist :songs="theSearchResults"></musiclist>
  </div>
</template>

<script>
import { getAccessToSearchResults } from "@/api/search ";
import musiclist from "@/components/MusicList.vue";
import loadmore from "@/components/LoadMore.vue";
export default {
  props: ["keywords"],
  components: { musiclist, loadmore },
  data() {
    return {
      theSearchResults: [], //搜索结果数据
      singer: [],//歌手
      theAlbum: [],//专辑
      playlist: [],//歌单
    };
  },
  methods: {
    // 获取搜索结果
    getAccessToSearchResultsFun() {
      getAccessToSearchResults(this.keywords, 1, 30).then((data) => {
        if (data.code == 200) {
          this.theSearchResults = data.result.songs;
        }
      });
      //专辑
      getAccessToSearchResults(this.keywords, 10, 1).then((data) => {
        if (data.code == 200) {
          this.theAlbum = data.result.albums;
         
        }
      });
      //歌手
      getAccessToSearchResults(this.keywords, 100, 1).then((data) => {
        if (data.code == 200) {
          this.singer = data.result.artists;
          
        }
      });
      //歌单
      getAccessToSearchResults(this.keywords, 1000, 1).then((data) => {
        if (data.code == 200) {
          this.playlist = data.result.playlists;
         
        }
      });
    },
    // 历史记录
    setHistroy() {
      if (!this.keywords || this.keywords == "" || this.keywords.length < 1) {
        return;
      }
      let historys = localStorage.getItem("searchhistory");
      let historyArr = [];
      if (historys) {
        historyArr = JSON.parse(historys);
      }
      historyArr.unshift(this.keywords); //把每次结果存到数组
      historyArr = [...new Set(historyArr)]; //去重
      localStorage.setItem("searchhistory", JSON.stringify(historyArr));
    },
  },
  created() {
    this.setHistroy();
    this.getAccessToSearchResultsFun();
  },
}
</script>

<style lang="scss" scoped>

.ultlist {
  .title {
    margin-left: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #666;
    margin-top: 10px;
  }
  .list {
      margin-bottom: -20px;
    .item {
      position: relative;
      height: 66px;
      .link {
        .list-btn {
          display: flex;
          align-items: center;
          height: 66px;
          margin-left: 10px;
          padding: 8px 10px 8px 0;
          box-sizing: border-box;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);

          .piccover {
            position: relative;
            width: 50px;
            height: 50px;
            margin-right: 15px;
            //  line-height: 0;
            img {
              flex: 0 0 auto;
              display: inline-block;
              display: block;
              width: 100%;
            }
          }
          .describe {
            flex: 1;
            display: inline-block;
            width: 1%;
            .mainde {
              font-weight: 400;
              font-size: 17px;
              line-height: 30px;
              .hcover {
                display: inline;
                .zhuanj {
                    font-size: 16px;
                color: #ccc;

                }
               
              }
            }
            .addtional {
              font-size: 12px;
              line-height: 15px;
              color: #999;
              width: 100%;
              display: inline-block;
            }
            .f-thide {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
            }
          }
          .u-svg {
            width: 8px;
            height: 13px;
            background-image: url("");
          }
          
        }
         .bordnone{
              border: none;
          }
      }
    }
  }
  
}
</style>